<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
	</head>
	<body>
		    <div class="wrap">
        <h1>
            You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
        </h1>

        <div class="saySection">
            <input type="text" id="inValue" class="txtSay"/>
            <input type="button" value="Say" id="btnSay" class="btnSay"/>
        </div>
    </div>
	</body>
	
	<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
	<script>
		   //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
		        var str="红鲤鱼与绿鲤鱼与卢";
		        var strarr=str.split("");
		        var str2=""
		        var num=0;
		        var timer=setInterval(function(){
		        	if(strarr[num]==undefined){
		        		clearInterval(timer)
		        	}else{
		        		str2+=strarr[num];
		        	num++;
		        	$(".word").text(str2);
		        	}
		        },300)
		        
            //作业 需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容。
            $('#btnSay').click(function() {
		        var inputText = $('#inValue').val();
		        var inputArr = inputText.split("");
		        var inputStr = "";
		        var index = 0;
		        var typeTimer = setInterval(function() {
		            if (inputArr[index] === undefined) {
		                clearInterval(typeTimer);
		            } else {
		                inputStr += inputArr[index];
		                $('.word').text(inputStr);
		                index++;
		            }
		        }, 300);
		    });
	</script>
</html>
